<template>
  <div class="page">
    <div class="c-main p20">
      <div class="c-body">
        <el-row type="flex" justify="center">
          <el-col :span="14">
            <el-form ref="form" :model="pageAjax.data" label-width="120px">
              <el-form-item label="功能类型">
                <el-radio-group v-model="pageAjax.data.type">
                  <el-radio label="menu">功能</el-radio>
                  <el-radio label="button">分组</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="功能名称：">
                <el-input
                  placeholder="请输入功能名称"
                  v-model="pageAjax.data.name"
                ></el-input>
              </el-form-item>
              <el-form-item label="请选择父级功能">
                <el-cascader
                  v-model="pageAjax.data.parentId"
                  :props="orgCascaderCp.config.props"
                  :options="orgSupAjax.data"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="前端路由：">
                <el-input
                  placeholder="前端路由"
                  v-model="pageAjax.data.frontRoute"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="后端路由："
                v-if="pageAjax.data.type == 'menu'"
              >
                <el-input
                  placeholder="后端路由"
                  v-model="pageAjax.data.backRoute"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="rSubmitForm">提交</el-button>
                <el-button @click="rBack">取消</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { addFunction } from "@/api/authority.js";
import { getOffspringnTree } from "@/assets/js/util.js";
import _ from "lodash";

export default {
  name: "system_createFunction",
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      data: {
        type: "menu",
        name: "", // 功能名称
        parentId: 0, // 上级功能
        frontRoute: "",
        backRoute: ""
      }
    },
    orgSupAjax: {
      loading: false,
      data: [],
      orginData: []
    },

    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          checkStrictly: true
        }
      }
    }
  }),
  created() {
    let _that = this;

    _that.getOrgData();
  },
  methods: {
    rSubmitForm() {
      let _that = this;
      let formData = _.cloneDeep(_that.pageAjax.data);

      if (!formData.name) {
        _that.$message.error("功能名称不能为空");
        return;
      }
      if (!formData.frontRoute) {
        _that.$message.error("前端路由不能为空");
        return;
      }
      if (formData.type == "menu") {
        if (!formData.backRoute) {
          _that.$message.error("后端路由不能为空");
          return;
        }
      } else {
        _that.pageAjax.data.backRoute = "";
      }

      let parentId = formData.parentId
        ? formData.parentId[formData.parentId.length - 1]
        : formData.parentId;

      if (_that.pageAjax.loading) {
        return;
      }

      _that.pageAjax.loading = true;
      addFunction({
        name: formData.name,
        parentId: parentId,
        frontRoute: formData.frontRoute,
        backRoute: formData.backRoute,
        type: formData.type
      })
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.$store
              .dispatch("getFunctionList", { latest: true })
              .then(() => {
                _that.$message({
                  type: "success",
                  message: "添加成功",
                  onClose: () => {
                    _that.goRefresh(-1);
                  },
                  duration: 1200
                });
              });
          } else {
            _that.$message.error(respData.msg || "添加失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    },

    getOrgData() {
      let _that = this;

      _that.$store.dispatch("getFunctionList").then(() => {
        let _that = this;
        let arr = _.cloneDeep(_that.$store.state.functionList) || [];
        _that.orgSupAjax.orginData = _.cloneDeep(arr);
        let arrParent = [];
        arr.forEach(item => {
          if (item.type === "button") {
            arrParent.push(item);
          }
        });
        // 去掉全部

        _that.orgSupAjax.data = getOffspringnTree(arrParent, 0);
      });
    },
    rBack() {
      this.goRefresh(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-main {
    margin-top: 20px;
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
